<template>
  <view class="u-keyboard-wrapper" @touchmove.stop.prevent="noop">
    <view class="u-keyboard">
      <view class="u-keyboard__button-wrapper" v-for="item in numList" :key="item">
        <view class="u-keyboard__button-wrapper__button " hover-class="u-hover-class" :hover-stay-time="200"
          @touchstart.stop="backspaceClick" @touchend="clearTimer" v-if="item=='退格'">
          <u-icon name="backspace" color="#303133" size="28"></u-icon>
        </view>

        <view class="u-keyboard__button-wrapper__button" @tap="keyboardClick(item)" hover-class="u-hover-class"
          :hover-stay-time="200" v-else>
          <text class="u-keyboard__button-wrapper__button__text">{{item}}</text>
        </view>

      </view>
    </view>
    <!--    <view class="u-keyboard right">
      <view class="u-keyboard__button-wrapper">
        <view class="u-keyboard__button-wrapper__button " hover-class="u-hover-class" :hover-stay-time="200"
          @touchstart.stop="backspaceClick" @touchend="clearTimer">
          <u-icon name="backspace" color="#303133" size="28"></u-icon>
        </view>
      </view>
      <view class="u-keyboard__button-wrapper">
        <view class="u-keyboard__button-wrapper__button" @tap="clear()" hover-class="u-hover-class"
          :hover-stay-time="200">
          <text class="u-keyboard__button-wrapper__button__text">清空</text>
        </view>
      </view>
      <view class="u-keyboard__button-confirm">
        <view class="u-keyboard__button-wrapper__button" @tap="confirm()" hover-class="u-hover-class"
          :hover-stay-time="200">
          <text class="u-keyboard__button-wrapper__button__text">确认</text>
        </view>
      </view>
    </view> -->
  </view>
</template>

<script>
  /**
   * keyboard 键盘组件
   * @description
   * @tutorial
   * 
   * @event {Function} change		点击键盘触发
   * @event {Function} backspace	点击退格键触发
   * @event {Function} confirm	点击确认键触发
   * @event {Function} clear	点击清除键触发
   * @example
   */
  export default {
    mixins: [uni.$u.mpMixin, uni.$u.mixin],

    data() {
      return {
        backspace: 'backspace', // 退格键内容
        timer: null, // 长按多次删除的事件监听
      };
    },
    computed: {
      // 键盘需要显示的内容
      numList() {
        return ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '退格'];
      },
    },
    methods: {
      // 点击清除键
      confirm() {
        this.$emit('confirm')
      },
      // 点击清除键
      clear() {
        this.$emit('clear')
      },
      // 点击退格键
      backspaceClick() {
        this.$emit('backspace');
        clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
        this.timer = null;
        this.timer = setInterval(() => {
          this.$emit('backspace');
        }, 250);
      },
      clearTimer() {
        clearInterval(this.timer);
        this.timer = null;
      },
      // 获取键盘显示的内容
      keyboardClick(val) {
        this.$emit('change', val);
      }
    }
  };
</script>

<style lang="scss" scoped>
  $u-number-keyboard-background-color:#fff !default;
  $u-number-keyboard-button-width:8vw !default;
  $u-number-keyboard-button-margin:1rem !default;
  $u-number-keyboard-button-height: 14vh !default;
  $u-number-keyboard-button-background-color:#F7F7F7 !default;
  $u-number-keyboard-text-font-size:2.8rem !default;
  $u-number-keyboard-text-font-weight:500 !default;
  $u-number-keyboard-text-color:$u-main-color !default;
  $u-number-keyboard-gray-background-color:rgb(200, 202, 210) !default;
  $u-number-keyboard-u-hover-class-background-color: #BBBCC6 !default;

  .u-keyboard-wrapper {
    display: flex;
    justify-content: flex-end
  }

  .u-keyboard {
    @include flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: $u-number-keyboard-background-color;
    flex-wrap: wrap;
    padding: 0;
    display: grid;
    grid-template-rows: repeat(4,1fr);
    grid-template-columns: repeat(3,1fr);
    grid-gap: 1rem;
    &.right {
      flex-direction: column;
      justify-content: flex-start;

      .u-keyboard__button-wrapper {
        margin-right: 0;
        
      }
    }

    &__button-confirm {
      flex: 1;
      padding-bottom: 1rem;

      .u-keyboard__button-wrapper__button {
        height: 100%;
        background-color: #38C09E;

        &__text {
          color: #fff;
        }
      }
    }

    &__button-wrapper {
      margin: $u-number-keyboard-button-margin;
      margin-top: 0;
      margin-left: 0;
      border-radius: 1rem;

      &__button {
        border: 1px solid #E5E5E5;
        border-radius: 1rem;
        width: $u-number-keyboard-button-width;
        height: $u-number-keyboard-button-height;
        background-color: $u-number-keyboard-button-background-color;
        @include flex;
        justify-content: center;
        align-items: center;

        &__text {
          font-size: $u-number-keyboard-text-font-size;
          font-weight: $u-number-keyboard-text-font-weight;
          color: $u-number-keyboard-text-color;
        }

        &--gray {
          background-color: $u-number-keyboard-gray-background-color;
        }
      }
    }
  }

  .u-hover-class {
    background-color: $u-number-keyboard-u-hover-class-background-color;
  }
</style>
